<template>  
  <div class="app-container">
        <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name"/>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" controls-position="right" :min="0"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career"/>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
      </el-form-item>

      <!-- 讲师头像：TODO -->
      <!-- 讲师头像 -->
      <el-form-item label="讲师头像">
          <!-- 头衔缩略图 -->
          <pan-thumb :image="teacher.avatar"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
          </el-button>
          <!--
      v-show：是否显示上传组件
      :key：类似于id，如果一个页面多个图片上传控件，可以做区分
      :url：后台上传的url地址
      @close：关闭上传组件
      @crop-upload-success：上传成功后的回调 -->
          <image-cropper
                        v-show="imagecropperShow"
                        :width="300"
                        :height="300"
                        :key="imagecropperKey"
                        :url="BASE_API+'/eduoss/fileoss'"
                        field="file"
                        @close="close"
                        @crop-upload-success="cropSuccess"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
 </div>  
</template>

<script>
  import teacherApi from '@/api/edu/teacher'
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'

  export default {
    // 声明引入的上传文件组件
    components: { ImageCropper, PanThumb },

    data(){
      return {
          teacher:{
            //自定义初始值，也可以不定义
            name:'',
            sort: '',
            level:1,
            career:'',  //资质
            intro:'', // 简介
            avatar:'' //头像
          },
          // 设置上传表单默认为不显示状态
          imagecropperShow:false,
          // 上传组件标识
          imagecropperKey:0,
          // 获取 请求访问路径
          BASE_API:process.env.BASE_API,  // 获取dev.env.js中定义的url地址
          saveBtnDisabled:false //保存按钮是否禁用
      }
    },
    created(){ //页面渲染之前调用
        //判断 是添加操作或修改操作初始化方法
        this.init(); 
    },
    // 监听
    watch:{
      // 解决 created()只会执行一次。无法初始化页码bug
      $route(to,from){ // 获取路由变化的方式
          this.init(); 
      }
    },
    methods:{
      // 关闭上传框
      close(){
          // 设置为 false
          this.imagecropperShow=false;
          // 初始化将上传组件的 imagecropperKey,每次操作完后。都重新初始化
          this.imagecropperKey = this.imagecropperKey+1;
      },
      // 文件上传成功回调方法
      cropSuccess(data){ 
          //data为后台返回的json数据
          this.imagecropperShow=false;
          // 该方法将response作了建议封装。直接使用data即可。
          this.teacher.avatar = data.varatarUrl;
          // 初始化 
            this.imagecropperKey = this.imagecropperKey+1;
      },
      // 抽取重复代码 
      init(){
        // 通过路由中判断是否有 id参数来区分是添加操作，还是修改操作。
        if (this.$route.params && this.$route.params.id) {
            // 从路由中获取id值
            const id = this.$route.params.id;
            // 在调用定义的方法查询 讲师信息并回显
            this.getInfo(id);
         }
         // bug 当相同的路由同时访问同一个.vue页码时。created()只会执行一次！解决方式，使用vue的组件，监听器
         else{ 
           // 路径中没有 id值。为添加操作。直接把之前的teacher保存的数据清空。
           this.teacher = {};
           this.teacher.avatar='https://moster0506.oss-cn-shanghai.aliyuncs.com/2020/05/15/1262504573984f37b7ea100ae3d2abc0file.png'
         }
      },
      // 根据id 查询讲师信息
      getInfo(id){
        // 调用api
        teacherApi.getTeacherByid(id)
          .then(reponse => {
            // 将查询的讲师 赋值给当前讲师 完成回显
            this.teacher = reponse.data.teacher;
          });
      },

      // 添加或修改
      saveOrUpdate(){
        // 判断是添加还是修改
        if(this.teacher.id){
          // 修改
          this.updateTeacher();
        }else{
          // 添加
          this.saveTeacher();
        }
      },

      // 添加讲师
      saveTeacher(teacher){
          //  调用API
          teacherApi.addTeacher(this.teacher)
            .then(reponse =>{
                // 提示删除成功
                this.$message({
                type: 'success',
                message: '添加讲师成功!'
              });
              // 重新加载 列表， 通过路由进行跳转到 list.vue
              this.$router.push({path:'/teacher/table'});
            })
      },

      // 修改讲师
      updateTeacher(){
          // 调用api
          teacherApi.editTeacher(this.teacher)
            .then(Response => {
                this.$message({
                type: 'success',
                message: '修改讲师成功!'
              });
               // 重新加载 列表， 通过路由进行跳转到 list.vue
              this.$router.push({path:'/teacher/table'});
            });
      }
    }
  }
</script>

